<template>
  <div class="home_box">
    <swiperHome></swiperHome>
    <div class="main">
      <div class="one">
        <div class="big_title" @click="$router.push('/campus_information')">
          校园资讯
        </div>
        <div class="one_content">
          <div class="left" v-if="initData.newsList">
            <img :src="initData.newsList[0].imagesUrl" height="100%" alt="" />
          </div>
          <div class="right">
            <div class="one_r_title">
              <span>
                最新资讯
                <i></i>
              </span>
            </div>
            <ul>
              <li
                v-for="(e, i) in initData.newsList"
                :key="i"
                @click="$router.push('/campus_information/details/' + e.id)"
              >
                <span>
                  {{ e.title }}
                </span>
                <span>
                  {{ $moment(parseInt(e.createdAt)).format("YYYY-MM-DD") }}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="three">
        <div class="big_title" @click="$router.push('/mutual_aid')">
          互助物品
        </div>
        <div class="three_content">
          <div class="left">
            <div class="title">互助物品</div>
            <p>
              检查内容主要包括扬尘治理、安全生产、施工现场管理人员在岗情况、施工许可办理情况、建设工程施工合同、监理合同备案情况等
            </p>
            <div class="btn">
              <span @click="$router.push('/mutual_aid')">查看更多</span>
            </div>
          </div>
          <ul class="right">
            <li
              v-for="(e, i) in initData.goodsHelpList"
              :key="i"
              @click="$router.push('/mutual_aid/details/' + e.id)"
            >
              <!-- {{ e }} -->
              <img :src="e.describeImgUrl" width="100%" height="100%" alt="" />
              <div class="text">
                <span>
                  {{ e.goodsName }}
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="four">
        <div class="big_title" @click="$router.push('/lost_and_found')">
          失物招领
        </div>
        <ul class="four_content">
          <li
            v-for="(e, i) in initData.lostFoundList"
            :key="i"
            @click="$router.push('/lost_and_found/details/' + e.id)"
          >
            <img :src="e.describedImgUrl" width="100%" alt="" />
            <div class="title_time">
              <span>
                {{ e.goodsName }}
              </span>
              <span>
                {{ $moment(parseInt(e.createdAt)).format("YYYY-MM-DD") }}
              </span>
            </div>
            <div class="content">
              {{ e.describedText }}
            </div>
          </li>
        </ul>
      </div>

      <div class="six">
        <div class="big_title" @click="$router.push('/resource_sharing')">
          资源共享
        </div>
        <div class="six_content">
          <div class="right">
            <div class="one_r_title">
              <span>
                最新资源
                <i></i>
              </span>
            </div>
            <ul>
              <li
                v-for="(e, i) in initData.learnDatumList"
                :key="i"
                @click="$router.push('/resource_sharing/details/' + e.id)"
              >
                <span>
                  {{ e.title }}
                </span>
                <span>
                  {{ $moment(parseInt(e.createdAt)).format("YYYY-MM-DD") }}
                </span>
              </li>
            </ul>
          </div>
          <!-- <div class="right">
            <div class="one_r_title">
              <span>
                最新资讯
                <i></i>
              </span>
            </div>
            <ul>
              <li v-for="(e, i) in initData.learnDatumList" :key="i">
                <span>
                  {{ e.title }}
                </span>
                <span>
                  {{ $moment(parseInt(e.createdAt)).format("YYYY-MM-DD") }}
                </span>
              </li>
            </ul>
          </div> -->
        </div>
      </div>

      <div class="five">
        <div class="big_title" @click="$router.push('/task_publishing')">
          帮啦任务发布
        </div>
        <div class="five_content">
          <div class="tr_box">
            <div class="one_r_title">
              <span>
                帮啦任务
                <i></i>
              </span>
              <i @click="clickRefresh">刷新</i>
            </div>
            <ul>
              <li v-for="(e, i) in initData.errandList" :key="i">
                <div class="left">
                  <div class="col_title">
                    <span>
                      <el-tag v-if="e.status == 0">待接单</el-tag>
                      <el-tag type="success" v-if="e.status == 1">
                        已接单
                      </el-tag>
                      <el-tag type="warning" v-if="e.status == 2">
                        已解决
                      </el-tag>
                    </span>
                    <span
                      @click="$router.push('/task_publishing/details/' + e.id)"
                    >
                      {{ e.goodsName }}
                    </span>
                  </div>
                  <div class="col_content">
                    <span class="name">
                      {{ e.receiverUsersName }}
                    </span>
                    <span class="time">
                      {{ $moment(parseInt(e.createdAt)).format("YYYY-MM-DD") }}
                    </span>
                    <span class="prices"> ￥{{ e.prices }} </span>
                  </div>
                </div>
                <div class="right">接受</div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="seven">
        <div class="big_title">留言</div>

        <el-input
          type="textarea"
          :rows="12"
          placeholder="请输入内容"
          v-model="textMessage"
        >
        </el-input>
        <div class="btn">
          <el-button type="primary" @click="clickConfirmMessage">
            确认留言
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import swiperHome from "@/views/home/components/home-swiper.vue";
import { getHomeList } from "@/util/home.js";
import { getAddMessage } from "@/util/message.js";

export default {
  components: {
    swiperHome,
  },
  data() {
    return {
      initData: {},
      textMessage: "",
    };
  },
  created() {
    this.getHomeList();
  },
  mounted() {},
  methods: {
    // 初始化数据
    async getHomeList() {
      let { data: res } = await getHomeList();
      this.initData = res.data;
    },
    // 留言
    async clickConfirmMessage() {
      if (
        window.localStorage.getItem("id") == "" ||
        window.localStorage.getItem("id") == null
      ) {
        return this.$message.error("请先登录");
      }
      let query = {
        message: this.textMessage,
        createdAt: new Date(),
        userId: null,
        createdBy: "",
      };
      query.userId = window.localStorage.getItem("id");
      query.createdBy = window.localStorage.getItem("userName");
      let { data: res } = await getAddMessage(query);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      this.textMessage = "";
    },
    // 任务刷新
    clickRefresh() {
      this.$router.go(0);
    },
  },
};
</script>
<style lang="less" scoped>
.home_box {
  .big_title {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 48px;
    padding: 60px 0;
    cursor: pointer;
  }
  .main {
    width: 1200px;
    margin: 0 auto;
    .one {
      margin-bottom: 50px;
      .one_content {
        display: flex;
        .left {
          flex: 1;
          height: 370px;
          margin-right: 24px;
        }
        .right {
          flex: 1;
          height: 370px;
          // background-color: #fcc;
          border: 1px solid #ddd;
          padding: 18px;
          .one_r_title {
            border-bottom: 1px solid #ddd;
            margin-bottom: 15px;
            & > span {
              position: relative;
              display: inline-block;
              font-size: 18px;
              padding: 0 18px;
              line-height: 50px;
              height: 50px;
              i {
                position: absolute;
                width: 100%;
                height: 4px;
                background-color: #0166b6;
                left: 0;
                bottom: -2px;
              }
            }
          }
          & > ul {
            & > li {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 15px;
              padding-bottom: 15px;
              border-bottom: 1px solid #ddd;
              cursor: pointer;
              & > span:nth-child(1) {
                width: 250px;
                white-space: nowrap; //在一行显示
                text-overflow: ellipsis; //多余用....显示
                overflow: hidden;
              }
              & > span:nth-child(2) {
              }
            }
            & > li:last-child {
              border-bottom: none;
              margin-bottom: 0;
              padding: 0;
            }
          }
        }
      }
    }
    .three {
      margin-bottom: 50px;
      .three_content {
        display: flex;
        align-items: center;
        height: 270px;
        .left {
          width: 306px;
          .title {
            color: #464646;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 24px;
          }
          p {
            text-align: left;
            text-indent: 2em;
            margin-bottom: 12px;
            line-height: 24px;
          }
          .btn {
            text-align: right;
            span {
              cursor: pointer;
              color: #0166b6;
              border-bottom: 1px solid #0166b6;
            }
          }
        }
        .right {
          height: 100%;
          margin-left: 24px;
          display: flex;
          justify-content: space-between;
          width: 870px;
          & > li {
            cursor: pointer;
            width: calc(33.33% - 12px);
            background-color: #fcc;
            position: relative;
            overflow: hidden;
            .text {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              background: rgba(0, 0, 0, 0.5);
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              span {
                color: #fff;
                font-size: 18px;
              }
            }
          }
        }
      }
    }
    .two {
      margin-bottom: 50px;
      .two_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        & > li {
          width: calc(25% - 9px);
          background-color: #fcc;
          height: 200px;
          margin-bottom: 12px;
          .list_box {
          }
        }
      }
    }

    .four {
      margin-bottom: 50px;
      .four_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        & > li {
          cursor: pointer;
          width: calc(33.33% - 18px);
          background-color: #fff;
          margin-bottom: 24px;
          & > img {
            height: 384px;
          }
          .title_time {
            padding: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            & > span:last-child {
              color: #999;
            }
          }
          .content {
            font-size: 18px;
            line-height: 26px;
            padding: 0 12px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
    .five {
      margin-bottom: 50px;
      .five_content {
        .tr_box {
          border: 1px solid #ddd;
          padding: 18px;
          .one_r_title {
            border-bottom: 1px solid #ddd;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            & > span {
              position: relative;
              display: inline-block;
              font-size: 18px;
              padding: 0 18px;
              line-height: 50px;
              height: 50px;
              i {
                position: absolute;
                width: 100%;
                height: 4px;
                background-color: #0166b6;
                left: 0;
                bottom: -2px;
              }
            }
            & > {
              color: #0166b6;
              cursor: pointer;
            }
          }
          & > ul {
            & > li {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 15px;
              padding-bottom: 15px;
              border-bottom: 1px solid #ddd;
              .left {
                .col_title {
                  margin-bottom: 12px;
                  display: flex;
                  align-items: center;
                  & > span:nth-child(1) {
                    margin-right: 12px;
                  }
                  & > span:nth-child(2) {
                    font-size: 20px;
                    cursor: pointer;
                  }
                }
                .col_content {
                  .name {
                    color: #999;
                    margin-right: 12px;
                  }
                  .time {
                    color: #999;
                    margin-right: 12px;
                  }
                  .prices {
                    color: #0166b6;
                    font-weight: 700;
                  }
                }
              }
              .right {
                cursor: pointer;
                color: #0166b6;
                padding: 12px;
              }
            }
            & > li:last-child {
              border-bottom: none;
              margin-bottom: 0;
              padding: 0;
            }
          }
        }
      }
    }
    .six {
      margin-bottom: 50px;
      .six_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right {
          width: 100%;
          // width: calc(50% - 12px);
          // background-color: #fcc;
          border: 1px solid #ddd;
          padding: 18px;
          .one_r_title {
            border-bottom: 1px solid #ddd;
            margin-bottom: 15px;
            & > span {
              position: relative;
              display: inline-block;
              font-size: 18px;
              padding: 0 18px;
              line-height: 50px;
              height: 50px;
              i {
                position: absolute;
                width: 100%;
                height: 4px;
                background-color: #0166b6;
                left: 0;
                bottom: -2px;
              }
            }
          }
          & > ul {
            & > li {
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 15px;
              padding-bottom: 15px;
              border-bottom: 1px solid #ddd;
              & > span:nth-child(1) {
                width: 250px;
                white-space: nowrap; //在一行显示
                text-overflow: ellipsis; //多余用....显示
                overflow: hidden;
              }
              & > span:nth-child(2) {
              }
            }
            & > li:last-child {
              border-bottom: none;
              margin-bottom: 0;
              padding: 0;
            }
          }
        }
      }
    }
    .seven {
      .btn {
        text-align: center;
        margin-top: 24px;
        padding-bottom: 50px;
      }
    }
  }
}
</style>
